
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

        <title>Layout Container</title>


        <LINK rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/css/style.css')}}">
            <LINK rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/Layout/css/layout-default-latest.css')}}">

                <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css" type="text/css" media="all" />
                <link type="text/css" href="{{asset('GWIT_Plateform_bootstrap/css/custom-theme/jquery-ui-1.8.16.custom.css')}}" rel="stylesheet" />
                <LINK rel="stylesheet" type="text/css" href="{{asset('GWIT_Plateform_bootstrap/bootstrap/css/bootstrap.min.css')}}">

                    <SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></SCRIPT>
                    <SCRIPT type="text/javascript" src="{{asset('GWIT_Plateform_bootstrap/jquery-ui-1.8.19/js/jquery-ui.js')}}"></SCRIPT>
                    <SCRIPT type="text/javascript" src="{{asset('GWIT_Plateform_bootstrap/Layout/js/jquery.layout-latest.js')}}"></SCRIPT>
                    <script type="text/javascript" src="{{asset('GWIT_Plateform_bootstrap/widget_management/jquery-ui-personalized-1.6rc2.min.js')}}"></script>
                    <script src="{{asset('GWIT_Plateform_bootstrap/bootstrap/js/bootstrap.js')}}"></script>
                    <script src="{{asset('GWIT_Plateform_bootstrap/bootstrap/js/application.js')}}"></script>

                    <script type="text/javascript">
                    /**********************************  LAYOUT BODY ************************************************************/
                    var layout_Outer_body = {
                            name: "outerLayout_body" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout
                            // options.defaults apply to ALL PANES - but overridden by pane-specific settings
                            ,north: {
                                    spacing_open: -1			// cosmetic spacing
                                    ,size: 60
                                    ,togglerLength_open: 0			// HIDE the toggler button
                                    ,togglerLength_closed: -1			// "100%" OR -1 = full width of pane
                                    ,resizable: false
                                    ,slidable: false
                                    ,override: false
                                    ,fxName: "none"
                            }
                            ,south: {
                                    spacing_open: -1			// cosmetic spacing
                                    ,togglerLength_open: 0			// HIDE the toggler button
                                    ,togglerLength_closed: -1			// "100%" OR -1 = full width of pane
                                    ,resizable: false
                                    ,slidable: false
                                    ,override: false
                                    ,fxName: "none"
                            }
	
                    };

                    var layout_Outer_widget = {
                            name: "outerLayout_widget" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout
                            // options.defaults apply to ALL PANES - but overridden by pane-specific settings
                            ,zIndex: 0		// HANDLE BUG IN CHROME - required if using 'modal' (background mask)
                            ,north: {
			
                                    spacing_open: 0			// cosmetic spacing
                                    ,size: 25
                                    ,togglerLength_open: 0			// HIDE the toggler button
                                    ,togglerLength_closed: -1			// "100%" OR -1 = full width of pane
                                    ,resizable: false
                                    ,slidable: false
                                    ,override: false
                                    ,fxName: "none"
                            }
                            ,south: {
                                    spacing_open: -1			// cosmetic spacing
                                    ,togglerLength_open: 0			// HIDE the toggler button
                                    ,togglerLength_closed: -1			// "100%" OR -1 = full width of pane
                                    ,resizable: false
                                    ,slidable: false
                                    ,override: false
                                    ,fxName: "none"
                            }
	
                    };
	
                    var layout_Outer_container = {
                            name: "outerLayout_container" // NO FUNCTIONAL USE, but could be used by custom code to 'identify' a layout
                            ,resizeWithWindow:			false
                            // options.defaults apply to ALL PANES - but overridden by pane-specific settings
                            ,north: {
                                    spacing_open: -1			// cosmetic spacing
                                    ,togglerLength_open: 0			// HIDE the toggler button
                                    ,togglerLength_closed: -1			// "100%" OR -1 = full width of pane
                                    ,resizable: false
                                    ,slidable: false
                                    ,override: false
                                    ,fxName: "none"

                            }
                            ,west: {
                                    spacing_open: 0		// cosmetic spacing
                                    ,spacing_closed:	10
                                    ,togglerLength_open: 0			// HIDE the toggler button
                                    ,togglerLength_closed: -0			// "100%" OR -1 = full width of pane
                                    ,resizable: false
                                    ,slidable: true
                                    ,override: false
                                    ,fxName: "slide"
                                    ,fxSpeed: "fast"
                                    ,initClosed: true
                                    ,slideTrigger_open: "mouseover"

                            }
	
                    };


                    /***********************************************************************************************************/
                    var myLayout;// a var is required because this page utilizes: myLayout.allowOverflow() method

                    $(document).ready(function () {
                            myLayout = $('body').layout(layout_Outer_body).allowOverflow('north');
                
                            //Modification Initialisation des monitors
                            $('div .container_page').each(function(){
                                $(this).layout(layout_Outer_container)
                            });//layout_Outer_containe
                    
                            myLayoutWidget = $('div .widget').layout(layout_Outer_widget);//layout_Outer_containe
                
                            /***** initialisation des éléments *******/
                
                            $(window).load(function(){
                                //on initialise les bouttons previous et next
                                $("#previous-desktop").attr('class','disabled');
                                $("#previous-desktop a").html('&larr; none');
                                $("#next-desktop").attr('class', 'next');
                                $("#next-desktop a").html(listOfDesktop[0].hash+' &rarr;');
                                currentDesktop = listOfDesktop[0].hash;
                                }
                            );

                            $('.widget').draggable({ 
                                    handle: ".modal-header",
                                    containment: "parent",
                                    scroll: false
                            });
		
                            $('.widget').resizable({
                                    maxHeight: 700,
                                    maxWidth: 800,
                                    minHeight: 30,
                                    minWidth: 400
                            });

                            $('.widget').resize(function() {
                                     if (myLayoutWidget) myLayoutWidget.resizeAll();
                            });


                            /* Minimize: Hide content of Widget */
                            $('.widget .modal-header .btn-group .toggle_button').on("click", function() {
                                    /*var this_obj = $(this);
                                    var icone = this_obj.children();
                                    var widget_body = this_obj.parent().parent().parent().find('.widget-body');
                                    if(icone.hasClass('icon-minus')){
                                            icone.removeClass('icon-minus').addClass('icon-plus');
                                            //this_obj.parent().parent().parent().children('.ui-layout-center').hide();
                                            this_obj.parent().parent().parent().height(25);
                                    }else{
                                            icone.removeClass('icon-plus').addClass('icon-minus');
                                            this_obj.parent().parent().parent().height(200);
                                    }
			
                                    this_obj.find('div .ui-resizable-handle').hide();
                                    */
		
                            });
                            /* HIDE/SHOW Widget */
                            $('.widget .modal-header .btn-group .hide_button').on("click", function() {
                                    var this_obj = $(this);
                            });

                            $(".widget").on("mousedown", function() {
                                    $('.widget').removeClass('on_top');
                                    $(this).addClass('on_top');
		
                            });
		
                            /*************** MAIN MENU ****************/
                            /* Monitor */
                            $(".dropdown_button").on({
                               click:  function(){
                                     $(this).toggleClass("open");
                               }
                            });
		

                            /* Widget */
                            $(".widget_button").on({
                              click: function(){
                                        /*Close ul*/
                                       $(this).parent().toggleClass("open");
				
			
                                }
                            });
                            $("#widget_menu li.under_menu").on({
                              click: function(){
                                        /*Close ul*/
                                       $(this).parent().parent().toggleClass("open");
                                }
                            });
		

                            /* Activate/Hide widget */
                            $("#widget_menu li.wiget_list a").on({
                              click: function(){
		 	  
                                      $("#widget_menu li.wiget_list a div.btn").on({
                                            click: function(event){
                                                    event.stopPropagation();
                                            }		
                                      });

                                    /*    HIDE/SHOW widget    */
                                    var WidgetContainer = $('#monitor_1 .widget_zone > div');
			
                                    //Show Widget and put it on the front (z-index maximum)
                                    if($(this).children(".icon-ok").hasClass('icon-white')){ 
                                            $(this).children(".icon-ok").removeClass('icon-white');
                                            WidgetContainer.filter(this.hash).show();
				
                                    }else{//Hide Widget
                                            $(this).children(".icon-ok").addClass('icon-white');
                                            WidgetContainer.filter(this.hash).hide();
                                    }
			
                                }
                            });
                            $("#widget_menu li.wiget_list div.btn").on({
                                    click: function(event){
                                            alert('div');
                                    }
                            });
                            //Button left right du bureau
                            $("#previous-desktop").on({click: function(){
                                if($("#previous-desktop").attr('class') != "disabled"){
                                    //mise à jour du menu deroulant et du bureau
                                    tabContainers = $('#center > div');
                                    tabContainers.hide().filter(currentDesktop).show();
                                    $('#monitor_menu li.monitor_page a i.icon-ok').removeClass('icon-black');
                                    $('#monitor_menu li.monitor_page .icon-ok').addClass('icon-white');
                                    $(currentDesktop).children(".icon-ok").removeClass('icon-white');
                                    $(currentDesktop).children(".icon-ok").addClass('icon-black');

                                    currentDesktop = listOfDesktop[listOfDesktop.indexOf(currentDesktop) - 1];
                                    //On désactive le button si on arrive à la fin
                                    if(listOfDesktop.indexOf(currentDesktop) <= 0){
                                        $("#previous-desktop").attr('class','disabled');
                                        $("#previous-desktop a").html('&larr; Begin');
                                    }else{
                                        $("#previous-desktop a").html('&larr;'+listOfDesktop[listOfDesktop.indexOf(currentDesktop) - 1].hash);
                                    }
                        
                                    //On active le button precédent
                                    //On active le button precédent
                                    if($("#next-desktop").attr('class') == "disabled"){
                                        console.log("pwet");
                                        $("#next-desktop").attr('class','next');
                                    }
                                   }
                            }});
                
                            $("#next-desktop").on({click: function(){
                                if($("#next-desktop").attr('class') != "disabled"){
                                    //mise à jour du menu deroulant et du bureau
                                    tabContainers = $('#center > div');
                                    tabContainers.hide().filter(currentDesktop).show();
                                    $('#monitor_menu li.monitor_page a i.icon-ok').removeClass('icon-black');
                                    $('#monitor_menu li.monitor_page .icon-ok').addClass('icon-white');
                                    $(currentDesktop).children(".icon-ok").removeClass('icon-white');
                                    $(currentDesktop).children(".icon-ok").addClass('icon-black');

                                    currentDesktop = listOfDesktop[listOfDesktop.indexOf(currentDesktop) + 1];
                                    //On désactive le button si on arrive à la fin
                                    if(listOfDesktop.indexOf(currentDesktop) >= listOfDesktop.length - 1){
                                        $("#next-desktop").attr('class','disabled');
                                        $("#next-desktop a").html('End &rarr;');
                                    }else{
                                        $("#next-desktop a").html(listOfDesktop[listOfDesktop.indexOf(currentDesktop) + 1].hash+' &rarr;');
                                    }
                        
                                    //On active le button precédent
                                    //On active le button precédent
                                    if($("#previous-desktop").attr('class') == "disabled"){
                                        console.log("pwet");
                                        $("#previous-desktop").attr('class','previous');
                                    }
                                    $("#previous-desktop a").html('&larr;'+listOfDesktop[listOfDesktop.indexOf(currentDesktop)].hash);
                                   }
                            }});


                            /************** MONITOR TABS**************/
                            var tabContainers;
                            var currentDesktop;
                            //Liste des élements li
                            var listOfDesktop = $.makeArray(document.getElementById('monitor_menu').getElementsByClassName('button-desktop-activate'));
                            //console.log(document.getElementById('monitor_menu').getElementsByClassName('button-desktop-activate'));
                
                            $("#monitor_menu li.monitor_page a").on({
                               click: function(){
                                    tabContainers = $('#center > div');
                                    tabContainers.hide().filter(this.hash).show();
                                    //console.log(listOfDesktop);
                                    currentDesktop = this.hash;
                                    $('#monitor_menu li.monitor_page a i.icon-ok').removeClass('icon-black');
                                    $('#monitor_menu li.monitor_page .icon-ok').addClass('icon-white');
                                    $(this).children(".icon-ok").removeClass('icon-white');
                                    $(this).children(".icon-ok").addClass('icon-black');
                               }
                            }).filter(':first').click().click();	
                    });

                        </script>

                        </head>
                        <body>
                                <div class="navbar navbar-fixed-top">
                                    <div style="padding:2px 0px 0px 0px;border-bottom:1px solid #DDD;margin-top:0px;" class="box-header">
                                        <div class="container-fluid">
                                            <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                            </a>
                                            <a style="background:url('../images/logo.png') no-repeat 20px top; width: 150px;height:17px;margin-top:3px;" href="index.html" class="brand"></a>
                                            <div class="btn-group pull-right">
                                                <ul class="nav pull-left bar-root">

                                                    <li><a style="padding-bottom:0px;" data-original-title="" href="#"><i class="icon-comment "></i><span class="label label-warning">6</span></a> </li>
                                                    <li class="dropdown"><a style="padding-bottom:0px;" data-original-title="" data-toggle="dropdown" href="#"> <i class="icon-envelope"></i><span class="label label-success">5 new</span></a> 
                                                        <ul class="dropdown-menu">
                                                            <li><a style="padding-bottom:0px;" data-original-title="" href="chat.html"><img alt="" src="img/small/thumb1.png"> Subject : Project <p class="help-block"><small>From: ab.alhyane@gmail.com</small></p><span class="label">23/09/2012</span></a></li>
                                                            <li class="divider"></li>
                                                            <li><a style="padding-bottom:0px;" data-original-title="" href="chat.html"><img alt="" src="img/small/thumb2.png"> Subject : Film <p class="help-block"><small>From: ab.alhyane@gmail.com</small></p><span class="label">21/04/2012</span> </a></li>
                                                            <li class="divider"></li>
                                                            <li><a style="padding-bottom:0px;" data-original-title="" href="chat.html"><img alt="" src="img/small/thumb3.png"> Subject : Meeting <p class="help-block"><small>From: ab.alhyane@gmail.com</small></p><span class="label">20/02/2012</span></a></li>
                                                            <li class="divider"></li>
                                                            <li><a style="padding-bottom:0px;" data-original-title="" href="chat.html"><img alt="" src="img/small/thumb4.png"> Subject : Tasks <p class="help-block"><small>From: y.kostali@gmail.com</small></p><span class="label">19/01/2012</span></a></li>
                                                            <li class="divider"></li>
                                                            <li class="active"><a style="padding-bottom:0px;" data-original-title="" href="inbox.html"> Show All </a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="dropdown"><a style="padding-bottom:0px;" data-original-title="" data-toggle="dropdown" href="#"> <i class="icon-refresh "></i><span class="label label-info">3 Updates</span></a> 
                                                        <ul class="dropdown-menu">
                                                            <li><a data-original-title="" href="#"> Theme </a></li>
                                                            <li><a data-original-title="" href="#"> Components</a></li>
                                                            <li><a data-original-title="" href="#"> Plugins</a></li>
                                                            <li class="divider"></li>
                                                            <li class="active"><a data-original-title="" href="#"> Show All </a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                                <a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
                                                    <i class="icon-user"></i> John Doe
                                                    <span class="caret"></span>
                                                </a>

                                                <ul class="dropdown-menu">
                                                    <li><a href="#">Profile</a></li>
                                                    <li><a href="#">Settings</a></li>
                                                    <li><a href="#" class="cookie-delete">Delete Cookies</a></li>
                                                    <li class="divider"></li>
                                                    <li><a href="login.html">Logout</a></li>
                                                </ul>
                                            </div>
                                            <div class="nav-collapse">

                                                <div id="main_menu">

                                                    <div style="position:relative;float:left" class="dropdown_button">
                                                        <button href="#" class="btn dropdown"><i class="icon-eye-open icon-black"></i> Desktops &nbsp; &nbsp;<span class="caret"></span></button>

                                                        <ul style="font-size: 13px;text-shadow: none;width:250px;" class="dropdown-menu" id="monitor_menu">
                                                            <li class="li_grey monitor_page">
                                                                <a href="#monitor_1">
                                                                    <i class="icon-ok icon-black"></i> 
                                                                    <span> Test Code C++</span>
                                                                    <div style="float:right;display: inline;margin-top:-3px;">
                                                                        <div style="margin:1px;padding:1px;" class="btn"><i class="icon-pencil icon-black"></i></div>
                                                                        <div style="margin:1px;padding:1px;" class="btn"><i class="icon-trash icon-black"></i></div>
                                                                    </div>
                                                                </a> 
                                                            </li>
                                                            <li class="li_grey monitor_page">
                                                                <a href="#monitor_2">
                                                                    <i class="icon-ok icon-white"></i> 
                                                                    <span> Monitor 2</span>
                                                                    <div style="float:right;display: inline;margin-top:-3px;">
                                                                        <div style="margin:1px;padding:1px;" class="btn"><i class="icon-pencil icon-black"></i></div>
                                                                        <div style="margin:1px;padding:1px;" class="btn"><i class="icon-trash icon-black"></i></div>
                                                                    </div>
                                                                </a> 
                                                            </li>
                                                            <li class="li_grey monitor_page">
                                                                <a href="#monitor_3">
                                                                    <i class="icon-ok icon-white"></i> 
                                                                    <span> Monitor 3</span>
                                                                    <div style="float:right;display: inline;margin-top:-3px;">
                                                                        <div style="margin:1px;padding:1px;" class="btn"><i class="icon-pencil icon-black"></i></div>
                                                                        <div style="margin:1px;padding:1px;" class="btn"><i class="icon-trash icon-black"></i></div>
                                                                    </div>
                                                                </a> 
                                                            </li>
                                                            <li class="li_grey monitor_page">
                                                                <a href="#monitor_4">
                                                                    <i class="icon-ok icon-white"></i> 
                                                                    <span> Monitor 4</span>
                                                                    <div style="float:right;display: inline;margin-top:-3px;">
                                                                        <div style="margin:1px;padding:1px;" class="btn"><i class="icon-pencil icon-black"></i></div>
                                                                        <div style="margin:1px;padding:1px;" class="btn"><i class="icon-trash icon-black"></i></div>
                                                                    </div>
                                                                </a> 
                                                            </li>
                                                            <li class="divider"></li>
                                                            <li><a href="#"><i class="icon-plus"></i> New</a></li>
                                                            <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
                                                        </ul>
                                                    </div>

                                                    <div class="" style="position:relative;float:left; margin-left:0px;">
                                                        <button href="#" class="btn dropdown widget_button"><i class="icon-th-large icon-black"></i> Widgets &nbsp; &nbsp;<span class="caret"></span></button>
                                                        <ul style="font-size: 13px;text-shadow: none;width:250px;" class="dropdown-menu" id="widget_menu">
                                                            <li class="li_grey wiget_list">
                                                                <a href="#widget_1">
                                                                    <i class="icon-ok"></i> 
                                                                    <span> Test Download</span>
                                                                    <div style="float:right;display: block;margin-top:-3px;">
                                                                        <div style="margin:1px;padding:1px;" class="btn"><i class="icon-pencil icon-black"></i></div>
                                                                        <div style="margin:1px;padding:1px;" class="btn"><i class="icon-trash icon-black"></i></div>
                                                                    </div>
                                                                </a> 
                                                            </li>

                                                            <li class="divider"></li>
                                                            <li class="under_menu"><a href="#"><i class="icon-plus"></i> Add widget</a></li>

                                                        </ul>

                                                    </div>

                                                </div>

                                                <a style="" class="btn btn-success" id="lock_screen" href="#">
                                                    <i class="icon-off icon-white"></i> Screen</a>
                                            </div><!--/.nav-collapse -->
                                        </div>
                                    </div>

                                    <!--<div class="" style="height:15px;margin-top:0px; padding:0px;background-color:whiteSmoke; border-bottom:1px solid #DDD"></div>-->

                                </div>

                            <div id="center" class="pane ui-layout-center">

                                <div class="container_page" id="monitor_1">
                                    <!-- WIDGET ZONE -->
                                    <div class="pane ui-layout-center" style="padding:2px;">
                                        <div class="widget_zone" style="width:100%;height:100%">


                                            <div class="widget" id="widget_1" style="position:absolute;">
                                                <!--   <div class="modal-header" style="margin:2px 0px;padding:2px 15px 5px 15px;background:#F5F5F5; cursor: move;">-->
                                                <div class="ui-layout-north modal-body modal-header" style="margin:2px 0px;padding:2px 15px 0px 15px;background:#F5F5F5; cursor: move;border:none;border-bottom:1px solid #ccc">

                                                    <div class="btn-group" style="float:right;position:relative; margin-left:15px;">
                                                        <button class="btn btn-mini">
                                                            <i class="icon-trash icon-black"></i>
                                                        </button>
                                                    </div>
                                                    <div class="btn-group" style="float:right;position:relative; margin-left:3px;">

                                                    </div>
                                                    <div class="btn-group" style="float:right;position:relative; margin-left:15px;">
                                                        <button class="btn btn-mini toggle_button">
                                                            <i class="icon-minus icon-black"></i>
                                                        </button>
                                                        <button class="btn btn-mini">
                                                            <i class="icon-ok icon-black"></i>
                                                        </button>
                                                    </div>
                                                    <div class="btn-group" style="float:right;position:relative; margin-left:3px;">
                                                        <button class="btn btn-mini">
                                                            <i class="icon-refresh icon-black"></i>
                                                        </button>
                                                    </div>

                                                    <h4>Test Download</h4>
                                                </div>

                                                <div class="pane ui-layout-center modal-body" style="padding:2px;border:none">

                                                    <div class="widget_TopMenu">
                                                        <div class="btn-group" style="">
                                                            <button title="Hide widget" class="btn toggle_button">
                                                                <i class="icon-bold icon-black"></i> Bookmakers
                                                            </button>
                                                            <button class="btn">
                                                                <i class="icon-ok icon-black"></i> vcv
                                                            </button>
                                                        </div>					
                                                    </div>

                                                    <select class="span1"  style="margin:0px;padding:0px;">
                                                        <option>1</option>
                                                        <option>2</option>
                                                        <option>3</option>
                                                        <option>4</option>
                                                        <option>5</option>
                                                    </select>





                                                </div>


                                            </div>





                                        </div>

                                    </div><!-- WIDGET ZONE -->

                                    <div class="pane ui-layout-west" style="background-color:#F5F5F5;">
                                        <div class="menu_left">
                                            <ul class="nav nav-list">
                                                <li class="nav-header">Add Widgets</li>
                                                <li class="active"><a href="#"><i class="icon-white icon-home"></i> Odds comparator</a></li>
                                                <li><a href="#"><i class="icon-book"></i> Betslip</a></li>
                                                <li><a href="#"><i class="icon-pencil"></i> Surebets</a></li>
                                                <li><a href="#"><i class="icon-pencil"></i> Middles</a></li>
                                                <li><a href="#"><i class="icon-pencil"></i> Negative Middles</a></li>
                                                <li class="nav-header">Negative Middles</li>
                                                <li><a href="#"><i class="icon-user"></i> Profile</a></li>
                                                <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#"><i class="icon-flag"></i> Help</a></li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                                <!-- FIN TAB CONTENT -->

                                <div class="container_page" id="monitor_2">
                                    <!-- WIDGET ZONE -->
                                    <div class="pane ui-layout-center" style="padding:2px;">
                                        <div class="widget_zone" style="width:100%;height:100%">


                                            <div class="widget" id="widget_1" style="position:absolute;">
                                                <!--   <div class="modal-header" style="margin:2px 0px;padding:2px 15px 5px 15px;background:#F5F5F5; cursor: move;">-->
                                                <div class="ui-layout-north modal-body modal-header" style="margin:2px 0px;padding:2px 15px 0px 15px;background:#F5F5F5; cursor: move;border:none;border-bottom:1px solid #ccc">

                                                    <div class="btn-group" style="float:right;position:relative; margin-left:15px;">
                                                        <button class="btn btn-mini">
                                                            <i class="icon-trash icon-black"></i>
                                                        </button>
                                                    </div>
                                                    <div class="btn-group" style="float:right;position:relative; margin-left:3px;">

                                                    </div>
                                                    <div class="btn-group" style="float:right;position:relative; margin-left:15px;">
                                                        <button class="btn btn-mini toggle_button">
                                                            <i class="icon-minus icon-black"></i>
                                                        </button>
                                                        <button class="btn btn-mini">
                                                            <i class="icon-ok icon-black"></i>
                                                        </button>
                                                    </div>
                                                    <div class="btn-group" style="float:right;position:relative; margin-left:3px;">
                                                        <button class="btn btn-mini">
                                                            <i class="icon-refresh icon-black"></i>
                                                        </button>
                                                    </div>

                                                    <h4>Test Download</h4>
                                                </div>

                                                <div class="pane ui-layout-center modal-body" style="padding:2px;border:none">

                                                    <div class="widget_TopMenu">
                                                        <div class="btn-group" style="">
                                                            <button title="Hide widget" class="btn toggle_button">
                                                                <i class="icon-bold icon-black"></i> Bookmakers
                                                            </button>
                                                            <button class="btn">
                                                                <i class="icon-ok icon-black"></i> vcv
                                                            </button>
                                                        </div>					
                                                    </div>

                                                    <select class="span1"  style="margin:0px;padding:0px;">
                                                        <option>1</option>
                                                        <option>2</option>
                                                        <option>3</option>
                                                        <option>4</option>
                                                        <option>5</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div><!-- WIDGET ZONE -->

                                    <div class="pane ui-layout-west" style="background-color:#F5F5F5;">
                                        <div class="menu_left">
                                            <ul class="nav nav-list">
                                                <li class="nav-header">Add Widgets</li>
                                                <li class="active"><a href="#"><i class="icon-white icon-home"></i> Odds comparator</a></li>
                                                <li><a href="#"><i class="icon-book"></i> Betslip</a></li>
                                                <li><a href="#"><i class="icon-pencil"></i> Surebets</a></li>
                                                <li><a href="#"><i class="icon-pencil"></i> Middles</a></li>
                                                <li><a href="#"><i class="icon-pencil"></i> Negative Middles</a></li>
                                                <li class="nav-header">Negative Middles</li>
                                                <li><a href="#"><i class="icon-user"></i> Profile</a></li>
                                                <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#"><i class="icon-flag"></i> Help</a></li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>

                            </div>
                            <!-- FOOTER APPLICATION -->
                            <div id="footer" class="pane ui-layout-south">
                                &nbsp
                            </div>


                        </body>
                        </html>